<!DOCTYPE html><!--添加商品-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head th:replace="common/amazingHeader2::amazing_header('添加商品')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="fileForm" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>商品名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="required" lay-verify="name"
                           autocomplete="off" class="layui-input" onblur="chName(this)">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="nameMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="detail" class="layui-form-label">
                    <span class="x-red">*</span>细节描述
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="detail" name="detail" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="file" class="layui-form-label">
                    <span class="x-red">*</span>主图
                </label>
                <div class="layui-input-inline">
                    <input type="file" id="file" name="img"
                           class="layui-input" onchange="chFile()">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="imgMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="price" class="layui-form-label">
                    <span class="x-red">*</span>价格
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="price" name="price" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div id="hid">

            </div>
            <div class="layui-form-item">
                <label for="stock" class="layui-form-label">
                    <span class="x-red">*</span>库存
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="stock" name="stock" required="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red"></span>
                </div>
            </div>
            <div>
                <input type="hidden" name="id" id="proId">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="status"><span class="x-red">*</span>状态</label>
                <div class="layui-input-block" style="width: 17%">
                    <select id="status" class="layui-form-select" name="status">
                        <option value="1" id="s1">在售</option>
                        <option value="2" id="s2">下架</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" type="button" onclick="sub()">
                    更改
                </button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    let nameFlag = false;
    let imgFlag = false;

    function sub() {
        chName();
        chFile();
        if (imgFlag === false || nameFlag === false) {
            layer.msg('请检查你输入的内容', {time: 1500, icon: 5, shift: 6});
        } else {
            const formData = new FormData($("#fileForm")[0]);
            $.ajax({
                type: "POST",
                url: 'pro/changePro',
                data: formData,
                cache: false,           // 不缓存
                processData: false,     // jQuery不要去处理发送的数据
                contentType: false,     // jQuery不要去设置Content-Type请求头
                beforeSend: function () {
                    loading = layer.msg('处理中', {icon: 16});
                },
                success: function (result) {
                    layer.close(loading);
                    xadmin.close();
                }
            });
        }
    }

    function chName() {
        const val = $("#name").val();
        if (val.length > 10) {
            $("#nameMsg").text("名称长度不能大于10");
            nameFlag = false;
        } else if (val.length < 1) {
            $("#nameMsg").text("名称长度不能为空");
            nameFlag = false;
        } else {
            $("#nameMsg").text('');
            nameFlag = true;
        }
    }

    function chFile() {
        const val = $("#file").val();
        const index = val.lastIndexOf('.');
        const sub = val.substring(index + 1);
        if ('jpg' === sub || 'png' === sub || 'ico' === sub || 'PNG' === sub) {
            $("#imgMsg").text('');
            imgFlag = true;
        } else {
            $("#imgMsg").text('请上传图片格式文件');
            imgFlag = false;
        }
        if (val === '') {
            imgFlag = true;
        }
    }
</script>
<script>
    layui.use(['form', 'layer'],

        function () {
            form = layui.form;
            const id = window.location.href.split('?')[1].split('=')[1];
            $.ajax({
                type: 'GET',
                url: 'pro/proDetail',
                data: {
                    'id': id
                },
                success: function (result) {
                    const data = result.data;
                    $('#name').val(data.name);
                    $('#detail').val(data.detail);
                    $('#price').val(data.price);
                    $('#stock').val(data.stock);
                    if (data.status === 1) {
                        $('#s1').attr('selected', true);
                    } else {
                        $('#s2').attr('selected', true);
                    }
                    $('#proId').val(data.id);
                    form.render();
                }
            });


        })
</script>
</html>